// Reset the box-sizing
* {
    @include fn-box-sizing(border-box);
}
*:before, 
*:after {
    @include fn-box-sizing(border-box);
}

@-ms-viewport {
    width: device-width;
}
@-o-viewport {
    width: device-width;
}
@viewport {
    width: device-width;
}

// Body reset
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 16px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body, div, dl, dt, dd, ol, ul, li, 
h1, h2, h3, h4, h5, h6, hr, 
p, pre, blockquote, 
form, table, th, td, 
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    margin: 0;
    padding: 0;
}

body {
    line-height: $line-height-base;
    background-color: $color-white;
    font-family: $font-family-base;
    font-size: $font-size-base;
    color: $text-color;
    font-weight: $font-weight-base;
}

hr {
    margin-top: $line-height-computed;
    margin-bottom: $line-height-computed;
    border: 0 none;
    border-top: 1px solid $color-gray-lighter;
}

button, 
input, 
select, 
textarea {
    line-height: inherit;
    font-family: inherit;
    font-size: inherit;
}
[role="button"] {
    cursor: pointer;
}

img {
    vertical-align: middle;
}

a {
    color: $link-color;
    text-decoration: none;
  
    &:hover, 
    &:focus {
        text-decoration: none;
    }
    
    &:hover {
        color: $link-hover-color;
    }
  
    &:focus {
        outline: none;
    }
}

.fn-clf, .fn-clearfix {
    @include fn-clearfix;
}

.center-block {
    @include fn-center-block;
}
.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}

.hide {
    display: none !important;
}
.show {
    display: block !important;
}
.invisible {
    visibility: hidden;
}
.text-hide {
    @include fn-text-hide;
}
.text-ellipsis {
    @include fn-text-ellipsis;
}